<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>签到</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/checkInput.css"/>
    <style media="screen">
        body {
            background-color: #f4f4f4;
            font-size: 0.2rem;
        }

        [v-cloak] {
            display: none !important;
        }
    </style>
</head>

<body>
<span style="font-size:14px;"><style type="text/css">
    body
    {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
    }
</style></span>
<div class="loadingBack  uhide">
    <div id="loading" class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<div id="app">
    <div v-if="pageNum===3" class="map-box" v-cloak>
        <p class="map-text">
            请点击选择站点
        </p>
        <div class="map-sel-box ofh">
            {{branchName}}
        </div>
        <div class="map-btn" @click=enterPage>
            确定
        </div>
        <select class="map-sel" v-model="fairsInfoId" @change="getBranchName">
            <option value="0">请选择</option>
            <option v-for="item in saleFairsInfo" :value="item.fairsId">{{item.branchName}}</option>
        </select>
    </div>
    <div v-if="isHaveFairs===0"></div>
    <div v-else-if="pageNum===1" v-cloak>
        <!--搜索 -->
        <div class="com-search">
            <div class="fl inputbox clearfix">
                <img src="image/search.png" alt="" class="fl icon-search"/>
                <input type="text" placeholder="请输入客户标识／客户名称" class="fl" v-model.trim="keyWord"
                       @focus="showHistory"/>
            </div>
            <div @click="go_search()" class="btn-search">
                    <span>搜索<span>
            </div>
        </div>
        <article class="main" id="wrapper" @scroll="checkAndLoad">
            <div class="search-record">
                <!-- 列表1 -->
                <template v-if="pageState==='history'">
                    <div class="search-record-tit clearfix">
                        <span class="fl tit">搜索记录</span>
                        <!--<div class="fr clear-ht">-->
                        <!--<img src="image/clear.png" alt="" class="icon-clear ver_mid"/>-->
                        <!--<span class="ver_mid" @click="removeHistory()">清空历史</span>-->
                        <!--</div>-->
                    </div>
                    <ul class="search-record-list" v-for="(item,index) in historySearch">
                        <li class="clearfix"><span @click="go_search(item)" class="fl keyword">{{item}}</span><img
                                src="image/close.png" alt="" class="fr icon-close"
                                @click="removeHistory(item,index)"></li>
                    </ul>
                    <div class="new-clear-ht" @click="removeHistory()">
                        <img src="image/clear.png" alt="" class="ver_mid">
                        <span class="ver_mid">清空历史搜索</span>
                    </div>
                </template>
                <!--列表2 -->
                <ul class="search-record-list2" v-else>
                    <li v-for="(item,index) in showListData" class="checkbox2">
                        <template v-if="item.isSignFlag===0">
                            <p class="cop-name">{{item.custName}}</p>
                            <p><span class="phone-num ofh">{{item.man}}：{{item.manMobile}}</span><span
                                    class="k-name ofh">开票员：{{item.kpy}}</span></p>
                            <input type='checkbox' name='checkbox' :value="item.custNumberId" :id="'checkbox'+index"
                                   @change="checkCust(item,$event,index)"
                                   v-model="checkedIds">
                            <label :for='"checkbox"+index'></label>
                        </template>
                        <!--签到过的公司-->
                        <template v-else>
                            <p class="cop-name">{{item.custName}}</p>
                            <p>
                                <span class="phone-num ofh">{{item.man}}：{{item.manMobile}}</span><span
                                    class="k-name ofh">开票员：{{item.kpy}}
                                </span>
                            </p>
                            <img src="image/newYQD.png" alt="" class="new-yqd">
                            <div class="sYqd">
                                <input type="text" name="" value="" disabled>
                            </div>
                        </template>
                    </li>
                </ul>
            </div>
        </article>
        <!--弹框-->
        <div class="pfx" v-if="attendance_pop_box">
            <div class="cover-box"></div>
            <div class="pop-box">
                <p class="tac pt20">请填写参会人数</p>
                <p class="tac"><input type="text" class="pop-ip tac" v-model.trim="signCount1"></p>
                <div class="clearfix pop-btn">
                    <div class="fl pop-btn1" @click="attendance_pop_down">取消</div>
                    <div class="fr pop-btn2 ftgn" @click="go_sign">确定</div>
                </div>
            </div>
        </div>
        <!--底部悬浮 -->
        <div class="new-sign-foot clearfix" v-if="pageState==='search'">
            <!--<div class="fl">-->
            <!--<span class="ch-num ver_mid">参会人数：</span>-->
            <!--<input type="text" class="ver_mid" v-model.trim="signCount1">-->
            <!--</div>-->
            <!--<a class="fr qd-btn" @click="go_sign">-->
            <!--签到-->
            <!--</a>-->
            <div class="fl checkbox2 new-qd-left" v-if="J_signBtn">
                <input type="checkbox" name="checkbox" id="checkboxAll" value="" v-model="isCheckBtn"
                       @click='checkAllFn'>
                <label for="checkboxAll"></label>
                <span>全选</span>
                <span>共选中</span><span class="ftred">{{checkedIds.length}}</span><span>个客户</span>
            </div>
            <a class="new-qd-btn fr" @click="attendance_pop_show" id="qdBtn">
                签到
            </a>
            <!--第二种底部悬浮-->
        </div>
    </div>

    <!--签到成功页面start -->
    <div class="page-haSign" v-else-if="pageNum===2" v-cloak>
        <div class="haSign-title">
            <img src="image/gIcon.png" class="ver_mid">
            <span class="tit ver_mid">成功签到{{successNumbe}}家客户！</span>
        </div>

        <div class="haSign-list">
            <label for="">参会人数：</label>
            <span class="cont-num">{{signCount}}</span>
        </div>

        <!--<div class="haSign-list">-->
        <!--<label for="" :class="{ver_mid:(isHavaChangeGuestsCount==0)}">用餐人数：</label>-->
        <!--<template v-if="isHavaChangeGuestsCount===0">-->
        <!--<input type="text" name="" v-model.trim="guestsCount" class="peo-num ver_mid">-->
        <!--<span class="com-btn-sign ver_mid" @click="changeNumber">确认</span>-->
        <!--</template>-->
        <!--<span class="cont-num" v-else>{{guestsCount}}</span>-->
        <!--</div>-->

        <div class="haSign-list">
            <label for="">签到时间：</label>
            <span class="cont-num">{{signDate}}</span>
        </div>

        <div class="haSign-list" v-if="isShowReceive===1">
            <label for="">随行礼品：</label>
            <div class="com-btn-sign" v-if="isGetGift===0" @click="getGift">
                未领
            </div>
            <div class="com-btn-sign" style="background-color: #cccccc; color: #666666;border: 1px solid #f4f4f4"
                 v-else>
                已领
            </div>
        </div>

        <div class="skip-btn" @click="go_OrderMeeting()">
            去订货会>
        </div>
    </div>
    <!--签到成功页面end -->
</div>
</body>

<script type="text/javascript">
    !function () {
        var ua = navigator.userAgent.toLowerCase();
        if (/iphone|ipad|ipod/.test(ua)) {
            var sc = 1 / window.devicePixelRatio;
            document.getElementsByName('viewport')[0].content = 'initial-scale=' + sc + ', maximum-scale=' + sc + ', minimum-scale=' + sc + ', user-scalable=no';
        }
        var pxUnit = 100;
        var designWid = 750;
        var winWid = document.body.clientWidth;
        var winHei = document.body.clientHeight;
        var bl = winWid / designWid;
        document.querySelector('html').style.fontSize = (bl * pxUnit) + 'px';
    }();

</script>

<script src="js/vue.min.js"></script>
<!--<script src="js/vue-resource.min.js"></script>-->
<script src="js/zepto.min.js"></script>
<script src="js/common.js"></script>
<script>
    (function () {
        if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
            handleFontSize();
        } else {
            if (document.addEventListener) {
                document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
            } else if (document.attachEvent) {
                document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
            }
        }

        function handleFontSize() {
            // 设置网页字体为默认大小
            WeixinJSBridge.invoke('setFontSizeCallback', {
                'fontSize': 0
            });
            // 重写设置网页字体大小的事件
            WeixinJSBridge.on('menu:setfont', function () {
                WeixinJSBridge.invoke('setFontSizeCallback', {
                    'fontSize': 0
                });
            });
        }
    })();
</script>

<script>
    const pageSize = 20;
    var clickedFlag = 0;//防止过快点击按钮
    var app = new Vue({
        el: '#app',
        data: {
            //客户搜索列表相关数据
            fullListData: [],//当前关键字搜索结果的完整列表数据
            showListData: [],//当前显示的列表数据,主要用来切换完整列表和同标识列表
            checkedIds: [],
            isFullList: true,
            signCount1: '',//签到时填写的参会人数
            isCheckBtn: false,
            //历史记录相关数据
            historySearch: [],
            pageState: 'search',//分为'history','search'
            pageNum: 0,//分为1,2,3;1是搜索页，2是签到成功页，3是选择站点页
            keyWord: '',
            J_signBtn: false,//签到按钮显示
            attendance_pop_box: false,//签到弹框显示
            J_signHome: false,


            //用户相关
            openId: '',
            nickName: '',
            fairsInfoId: '',//选择参加的展会ID
            saleFairsInfo: [],//当前全部展会,
            branchName: '请选择',
            branchId:'',

            //签到相关
            isHavaChangeGuestsCount: 1,
            guestsCount: '',
            successNumbe: 0,
            signCount: 0,//签到后获取的成功签到人数
            signDate: '',
            isGetGift: 1,
            isHaveFairs: 0,
            isShowReceive: 0,//是否显示礼品领取

            //搜索结果分页相关
            canGoNext: false,
            pageIndex: 1,
            changeInputFn: 0

        },
        //vue生命周期 参考https://segmentfault.com/a/1190000008010666
        mounted: function () {
            if (devModel) {
                localStorage.setItem('signUserInfo', JSON.stringify({
                    openId: 'oRmr6wYfNbB_w8xzlPR_j3yFUSa800',
                    nickName: 'test0'
                    //openId: 'test12343213',
                    // nickName: 'hatodou'
                }));
            }

            this.initPage();
            var hs = localStorage.getItem('SignWebHistorySearch');
            if (hs) {
                this.historySearch = JSON.parse(hs);
            }
        },
        computed: {
            custNumberIds: function () {
                return this.checkedIds.join(',');
            }
        },
        methods: {
            prevent: function (e) {
                e.preventDefault();
            },
            initPage: function () {
                if (devModel) {


                    //  localStorage.setItem('SignWebCode','123456');//测试数据
                    localStorage.setItem('SignWebOpenId', 'oRmr6wYfNbB_w8xzlPR_j3yFUSa8');
                    localStorage.setItem('SignWebNickName', 'test');


                }
                var urlRequest = GetRequest();
                if (urlRequest.code) {
                    var lastCode = localStorage.getItem('SignWebCode');
                    if (lastCode == urlRequest.code) {
                        //说明本次页面是由返回键产生，code已失效，改由openid请求页面
                        var tempOpenId = localStorage.getItem('SignWebOpenId');
                        var tempNickName = localStorage.getItem('SignWebNickName');
                        if (!tempOpenId) {
                            alert('无法获取到code和id');
                        } else {
                            console.log('改由openid登录');
                            this.getCustomers('', tempOpenId);
                        }
                    } else {
                        localStorage.setItem('SignWebCode', urlRequest.code);
                        this.getCustomers(urlRequest.code);
                    }

                } else {
                    var user = localStorage.getItem('signUserInfo');
                    if (user) {
                        user = JSON.parse(user);
                        this.openId = user.openId;
                        this.nickName = user.nickName;
                        this.getCustomers('', this.openId);
                    } else {
                        alert('无法获取到code');
                    }
                }
            },
            checkAndLoad: function (e) {
                if (e.target.scrollTop + e.target.offsetHeight == e.target.scrollHeight && this.canGoNext && this.isFullList && this.pageState === 'search') {
                    // console.log('滚动搜索');                 
                    this.getSearchList(this.pageIndex + 1);
                }
            },
            showHistory: function () {
                this.pageState = 'history';
            },
            hideHistory: function () {
                var that = this;
                setTimeout(function () {
                    that.pageState = 'search';
                }, 2000);
            },
            removeHistory: function (item, index) {
                console.log('开始删除');
                if (item) {
                    this.historySearch.splice(index, 1);
                } else {
                    this.historySearch = [];
                }
                localStorage.setItem('SignWebHistorySearch', JSON.stringify(this.historySearch));
            },
            changeNumber: function () {
                if (clickedFlag == 1) {
                    return;
                }
                setTimeout(function () {
                    clickedFlag = 0;
                }, 1000);
                clickedFlag = 1;
                var temp = parseInt(this.guestsCount);
                if (!/^\d{1,8}$/.test(this.guestsCount)) {
                    Toast('请填写正确的用餐人数');
                    return;
                }
                this.guestsCount = temp;
                vueRequest('/cust/sign/changeJoinNumber', {
                    openId: this.openId,
                    guestsCount: this.guestsCount,
                    fairsInfoId: this.fairsInfoId
                }, this, function (result, that) {
                    that.isHavaChangeGuestsCount = 1;
                });

            },
            getGift: function () {
                if (clickedFlag == 1) {
                    return;
                }
                setTimeout(function () {
                    clickedFlag = 0;
                }, 1000);
                clickedFlag = 1;
                vueRequest('/cust/sign/getGift', {
                    openId: this.openId,
                    fairsInfoId: this.fairsInfoId
                }, this, function (result, that) {
                    that.isGetGift = 1;
                });

            },
            checkAllFn: function () {
                var custNoId = '';
               // console.log(this.showListData);
                for (var i in this.showListData) {
                    if (this.showListData[i].isSignFlag === 0) {
                        custNoId += ',' + this.showListData[i].custNumberId;
                    }

                }
                custNoId = custNoId.substr(1);
                var l_custID = custNoId.split(",")
                if (this.changeInputFn == 0) {
                  // console.log(l_custID)
                    this.checkedIds = l_custID;
                    this.isCheckBtn = true;
                    this.changeInputFn = 1;
                }
                else {
               //     console.log(this.showListData[0].custId);
                    this.checkedIds = this.showListData[0].custNumberId.split();
                    this.isCheckBtn = false;
                    this.changeInputFn = 0;
                }

            },
            checkCust: function (item, e, mainIndex) {
                var that = this;
                var isSignFlagNum = 0;
                for(var i in this.showListData){ 
                    if(this.showListData[i].isSignFlag == 0){
                        isSignFlagNum ++;
                    }
                }
                
             //   console.log(this.checkedIds.length+'</br>');
              //  console.log(isSignFlagNum);
                this.isCheckBtn= (this.checkedIds.length == isSignFlagNum ) ?  true: false;

             //   console.log(this.showListData)
                var curCustId = item.custNumberId;
                if (this.isFullList && e.target.checked) {
                    this.J_signBtn = true;
                    if (item.isHavaCustFlag && item.custFlag) {

                        vueRequest('/cust/sign/getCustByCustFlag', {
                            custFlag: item.custFlag,
                            fairsInfoId: this.fairsInfoId
                        }, this, function (result, that) {                          
                            var tempArr=that.splitNote(result.resultList);
                            var curIndex = -1;
                            var curCust = null;
                            var curCust = tempArr.filter(function (item, index) {
                                if (item.custNumberId === curCustId) {
                                    curIndex = index;
                                    return true;
                                }
                            });
                            if (curCust.length) {

                                tempArr.splice(curIndex, 1);
                                tempArr.unshift(curCust[0]);
                            }
                            that.checkedIds = [curCustId];
                            that.showListData = tempArr;
                            that.isFullList = false;


                        });
                    } else {
                        that.checkedIds = [curCustId];
                        that.J_signBtn = false;

                    }
                } else if (!this.isFullList && !e.target.checked && mainIndex === 0) {
                    this.showListData = this.fullListData;
                    this.isFullList = true;
                    this.checkedIds = [];
                    that.J_signBtn = false;
                }
            },
            go_search: function (item) {
                this.J_signBtn = false;
                if (item) {
                    this.keyWord = item;
                }
                if (!this.keyWord) {
                    Toast('请输入关键字搜索！');
                    return;
                }
                this.pageIndex = 1;
                this.canGoNext = false;
                this.getSearchList(this.pageIndex);
                this.fullListData = [];
                this.showListData = [];
                this.isFullList = true;
                this.pageState = 'search';

            },
            getSearchList: function (pageIndex) {
                if (pageIndex != 1 && !this.canGoNext) {
                    console.log('已到最后一页，停止加载...');
                    return;
                }
                console.log('即将加载第' + pageIndex + '页');
                vueRequest('/cust/sign/searchCust', {
                    keyWord: this.keyWord,
                    page: pageIndex,
                    pageSize: pageSize,
                    fairsInfoId: this.fairsInfoId,
                    branchId:this.branchId
                }, this, function (result, that) {
                    that.isFullList = true;
                    that.pageState = 'search';
                    that.canGoNext = result.pagination.canGoNext;
                    that.pageIndex = pageIndex;
                    var list=that.splitNote(result.resultList);
                    if (pageIndex == 1) {
                        
                        that.fullListData =list;
                        that.showListData =list;
                        that.checkedIds = [];
                        if (!that.showListData.length) {
                            Toast('无搜索结果');
                        }
                        var tempKey = that.keyWord;
                        if (tempKey) {
                            var tempIndex = that.historySearch.indexOf(tempKey);
                            if (tempIndex != -1) {
                                that.historySearch.splice(tempIndex, 1);
                            }
                            if (that.historySearch.length == 10) {
                                that.historySearch.pop();

                            }
                            that.historySearch.unshift(tempKey);
                            localStorage.setItem('SignWebHistorySearch', JSON.stringify(that.historySearch));
                        }
                    } else {
                        
                        that.fullListData = that.fullListData.concat(list);
                        that.showListData = that.showListData.concat(list);
                    }

                });
            },
            splitNote:function(arr){
              arr.forEach(function(item) {
                  var note=item.note;
                  var infoArr=[];
                  if(note){
                      infoArr=note.split(';');                   
                  }
                  item.man=infoArr[0]||'';
                  item.manMobile=infoArr[1]||'';
                  item.kpy=infoArr[2]||'';
              });
              return arr;
            },
            attendance_pop_show: function () {
                if (this.checkedIds.length > 0) {
                    this.attendance_pop_box = true;
                } else {
                    Toast('请选择签到公司！');
                }
            },
            attendance_pop_down: function () {
                this.attendance_pop_box = false;
            },


            attendance_pop: function (e) {
                if (e.path[0] == qdBtn) {
                    if (this.checkedIds.length > 0) {
                        this.attendance_pop_box = true;
                    } else {
                        Toast('请选择签到公司！');
                    }
                }
                else {
                    this.attendance_pop_box = false;
                }
                //console.log(e.path[0]);
            },
            go_sign: function () {
                if (clickedFlag == 1) {
                    return;
                }
                setTimeout(function () {
                    clickedFlag = 0;
                }, 1000);
                clickedFlag = 1;
                var temp = parseInt(this.signCount1);
                if (!(temp && (/^\d{1,8}$/.test(this.signCount1)))) {
                    Toast('请填写正确的参会人数');
                    return;
                }

                if (!this.custNumberIds) {
                    Toast('请选择签到公司');
                    return;
                }
                if (!this.openId) {
                    Toast('参数缺失');
                    return;
                }
                this.signCount1 = temp;

                var data = {
                    openId: this.openId,
                    nickName: this.nickName,                 
                    signCount: this.signCount1,
                    fairsInfoId: this.fairsInfoId,
                    custNumberIds:this.custNumberIds
                };

                vueRequest('/cust/sign/saveSignInfo', data, this, function (result, that) {
                    that.pageNum = 2;
                    that.isHavaChangeGuestsCount = result.isHavaChangeGuestsCount;
                    that.guestsCount = result.guestsCount;
                    that.successNumbe = result.successNumbe;
                    that.signCount = result.signCount;
                    that.signDate = result.signDate;
                    that.isGetGift = result.isGetGift;
                    that.isShowReceive = result.isShowReceive;
                });
            },
            go_OrderMeeting: function () {
                window.location.href = 'Meeting.html';
            },

            //获取客户信息和页面初始状态
            getCustomers: function (code, openId) {
                var that = this;
                var data = {};
                if (code) {
                    data.code = code;
                } else if (openId) {
                    data.openId = openId;
                }
                else {
                    alert('获取用户信息失败！');
                    return;
                }
                vueRequest('/cust/sign/getUserInfo', data, this, function (result, that) {
                    console.log('获取用户信息成功' + JSON.stringify(result));
                    if (!devModel) {
                        if (result.user) {
                            that.openId = result.user.openId;
                            that.nickName = result.user.nickName;
                            localStorage.setItem('signUserInfo', JSON.stringify(result.user));
                            localStorage.setItem('SignWebOpenId', result.user.openId);
                            localStorage.setItem('SignWebNickName', result.user.nickName);
                        } else {
                            //此时是通过openId获取的用户信息，使用上一次的本地存储                            
                            that.openId = localStorage.getItem('SignWebOpenId');
                            that.nickName = localStorage.getItem('SignWebNickName');
                        }
                    }
                    that.isHaveFairs = result.isHaveFairs;
                    if (that.isHaveFairs === 0) {
                        Toast('暂无展会数据', 5000);
                        return;
                    }
                    if (result.isHavaSign === 0) {
                        that.saleFairsInfo = result.saleFairsInfo;
                        if (that.saleFairsInfo && that.saleFairsInfo.length > 1) {
                            that.pageNum = 3;
                        } else if (that.saleFairsInfo && that.saleFairsInfo.length == 1) {
                            that.pageNum = 1;
                            that.fairsInfoId = that.saleFairsInfo[0].fairsId;
                            that.branchId=that.saleFairsInfo[0].branchId;
                            localStorage.setItem('SignWebFairsInfoId', that.fairsInfoId);
                        } else {
                            Toast('接口返回数据格式错误');
                        }
                    } else {
                        that.pageNum = 2;
                        that.isHavaChangeGuestsCount = result.isHavaChangeGuestsCount;
                        that.guestsCount = result.guestsCount;
                        that.successNumbe = result.successNumbe;
                        that.signCount = result.signCount;
                        that.signDate = result.signDate;
                        that.isGetGift = result.isGetGift;
                        that.isShowReceive = result.isShowReceive;
                        that.fairsInfoId = result.fairsId;
                        localStorage.setItem('SignWebFairsInfoId', that.fairsInfoId);
                    }

                });
            },
            enterPage: function () {
                if (this.branchName == '请选择') {
                    Toast('请选择要进入的站点！');
                } else {
                    this.pageNum = 1;
                    Toast('您已进入' + this.branchName + '公司');
                    localStorage.setItem('SignWebFairsInfoId', this.fairsInfoId);
                }
            },
            getBranchName: function (e) {
                if (!this.fairsInfoId) {
                    this.branchName = "请选择"
                } else {
                    this.branchName = e.target.selectedOptions[0].text;                  
                     for(var i=0;i<this.saleFairsInfo.length;i++){
                         if(this.fairsInfoId==this.saleFairsInfo[i].fairsId){
                              this.branchId=this.saleFairsInfo[i].branchId;
                         }
                     }
                }
            }
        }
    });

    // app.goTest();

</script>
</html>